<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.js"></script>
</head>
<style>
    * {
        padding: 0; margin: 0;
    }
    .container {
        width: 600px; height: 35px;
        margin: 100px auto; position: relative;
    }
    .container .searchInput {
        float: left; 
        border-top: 1px solid #ccc;
        border-left: 1px solid #ccc;
        border-bottom: 1px solid #ccc;
        width: 500px; height: 35px;
        box-sizing: border-box;
        border-top-left-radius: 2px;
        border-bottom-left-radius: 2px;
    }
    .container .searchBtn {
        float: left; color: white; line-height: 35px; text-align: center;
        width: 100px; height: 35px; background-color: #007ACC;
        border-top-right-radius: 2px;
        border-bottom-right-radius: 2px;
    }
    .container .droplist {
        position: absolute; top: 35px;
        list-style: none; box-sizing: border-box;
        width: 100%; border: 1px solid #ccc;
    }
    .container .droplist li {
        float: left; height: 25px;
        width: 596px; padding-left: 2px;
    }
    .container .droplist li:hover {
        cursor: pointer;
        background: #ccc;
    }
</style>


<script>
    var searchInput;
    var droplist;

    onload = function(){
        searchInput = document.getElementsByClassName("searchInput")[0];
        droplist = document.getElementsByClassName("droplist")[0];
        //使用JSONP解决ajax不能跨域的问题
        searchInput.addEventListener("keyup", function(){
            // var _script = document.createElement("script");
            // _script.src = `http://suggestion.baidu.com/su?wd=${this.value}&cb=cbk`;
            // document.body.appendChild(_script);
            $.ajax({
                url : `http://suggestion.baidu.com/su?wd=${this.value}`,
                dataType : "jsonp",
                jsonp: "cb",
                success : function(data){
                    console.log(data);
					droplist.innerHTML = "";
					var words = data.s;
					words.forEach(element => {
					    var li = document.createElement("li");
					    li.innerText = element;
					    droplist.appendChild(li);
					});
                }
            });
        })
    }

</script>

<body>
    <div class="container">
        <input class="searchInput" type="text">
        <span class="searchBtn">百度一下</span>
        <ul class="droplist">

        </ul>
    </div>
</body>




</html>